<template>
  <div class="view-container">

    <!--<el-alert class="view－alert"
      :title="alertText"
      type="warning"
      show-icon>
    </el-alert>-->

    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
      <el-tab-pane v-for="tab in tabs" :key="tab.name" :name="tab.name">
        <span slot="label">
          {{tab.label}}
          <el-badge class="mark" :value="tab.num" :max="99" :hidden="tab.num<=0"/>
        </span>
      </el-tab-pane>
    </el-tabs>

    <div class="">
      <keep-alive>
        <component :is="activeName">
        </component>
      </keep-alive>
    </div>

  </div>
</template>

<script>
  import {getTab,setTab} from '@/utils/order';
  import reservationPendingPayment from './reservation_pending_payment.vue';
  import reservationPendingDeliver from './reservation_pending_deliver.vue';
  import reservationDelivered from './reservation_delivered.vue';

  export default {
    name: 'orderReservation',
    components: {
      'reservation-pending-payment': reservationPendingPayment,
      'reservation-pending-deliver': reservationPendingDeliver,
      'reservation-delivered': reservationDelivered,
    },
    data()
    {
      return {
        activeName: 'reservation-pending-payment', //当前激活的标签,以及视图
        tabs: [
          {label: '待付款', name: 'reservation-pending-payment', num: 0},
          {label: '待发货', name: 'reservation-pending-deliver', num: 0},
          {label: '已发货', name: 'reservation-delivered', num: 0},

        ], //标签页数组
      }
    },
    computed: {
      alertText()
      {
        return '您有 12 个待发货订单需要处理';
      }
    },
    mounted: function () {
      let activetab = getTab();
      if(this.tabs.some((tab)=>{return activetab === tab.name}))
      {
        this.activeName = activetab;
      }
    },
    methods: {
      handleClick(tab,event)
      {
        setTab(tab.name);
      }
    }
  }
</script>
